<template>
  <div class="apple-dashboard">
    <!-- 苹果风格侧边栏 -->
    <div class="apple-sidebar" :class="{ 'collapsed': isCollapse }">
      <!-- Logo区域 -->
      <div class="apple-logo">
        <div class="logo-icon">📚</div>
        <div class="logo-text" v-show="!isCollapse">爱写作</div>
      </div>

      <!-- 导航菜单 -->
      <nav class="apple-nav">
        <div class="nav-section">
          <div class="nav-section-title" v-show="!isCollapse">主要功能</div>
          <div class="nav-items">
            <div
              v-for="item in mainMenuItems"
              :key="item.index"
              class="nav-item"
              :class="{ 'active': activeMenu === item.index }"
              @click="handleMenuSelect(item.index)"
            >
              <div class="nav-item-icon">
                <component :is="item.icon" />
              </div>
              <span class="nav-item-text" v-show="!isCollapse">{{ item.title }}</span>
            </div>
          </div>
        </div>

        <div class="nav-section">
          <div class="nav-section-title" v-show="!isCollapse">工具与设置</div>
          <div class="nav-items">
            <div
              v-for="item in toolMenuItems"
              :key="item.index"
              class="nav-item"
              :class="{ 'active': activeMenu === item.index }"
              @click="handleMenuSelect(item.index)"
            >
              <div class="nav-item-icon">
                <component :is="item.icon" />
              </div>
              <span class="nav-item-text" v-show="!isCollapse">{{ item.title }}</span>
            </div>
          </div>
        </div>

        <!-- 管理员菜单 -->
        <div class="nav-section" v-if="isAdmin">
          <div class="nav-section-title" v-show="!isCollapse">管理员</div>
          <div class="nav-items">
            <div
              v-for="item in adminMenuItems"
              :key="item.index"
              class="nav-item"
              :class="{ 'active': activeMenu === item.index }"
              @click="handleMenuSelect(item.index)"
            >
              <div class="nav-item-icon">
                <component :is="item.icon" />
              </div>
              <span class="nav-item-text" v-show="!isCollapse">{{ item.title }}</span>
            </div>
          </div>
        </div>
      </nav>
    </div>

    <!-- 主要内容区域 -->
    <div class="apple-main">
      <!-- 苹果风格顶部栏 -->
      <header class="apple-header">
        <div class="header-left">
          <button class="sidebar-toggle" @click="toggleSidebar">
            <Expand v-if="isCollapse" />
            <Fold v-else />
          </button>
          <h1 class="page-title">{{ pageTitle }}</h1>
        </div>

        <div class="header-center">
          <!-- 模型选择器 - 所有用户都可以使用 -->
          <div class="model-selector-wrapper" v-if="availableModels.length > 0">
            <div class="model-selector">
              <el-select
                v-model="currentModel"
                @change="handleModelChange"
                placeholder="选择模型"
                class="apple-select"
              >
                <el-option-group label="可用模型" v-if="availableModels.length > 0">
                  <el-option
                    v-for="model in availableModels"
                    :key="model.id"
                    :label="model.name"
                    :value="model.id"
                  >
                    <span>{{ model.name }}</span>
                    <span v-if="model.description" class="model-description">
                      {{ model.description }}
                    </span>
                  </el-option>
                </el-option-group>
                <el-option
                  v-if="availableModels.length === 0"
                  disabled
                  value=""
                  label="暂无可用模型，请先创建API配置"
                />
              </el-select>
            </div>
          </div>
        </div>

        <div class="header-right">
          <!-- API配置按钮 - 仅管理员可见 -->
          <button
            v-if="isAdmin"
            class="api-config-btn"
            :class="{ 'configured': isApiConfigured }"
            @click="showApiConfig = true"
          >
            <Key />
            <span>{{ isApiConfigured ? 'API已配置' : 'API配置' }}</span>
          </button>

          <!-- 黑暗模式切换按钮 -->
          <button class="theme-toggle-btn" @click="toggleTheme" :title="isDarkMode ? '切换到浅色模式' : '切换到黑暗模式'">
            <Sunny v-if="isDarkMode" />
            <Moon v-else />
          </button>

          <!-- 用户信息 -->
          <el-dropdown @command="handleCommand" v-if="currentUser" class="user-dropdown-wrapper">
            <div class="user-profile">
              <div class="user-avatar">
                <el-avatar :size="36" :src="currentUser.avatar">
                  <User />
                </el-avatar>
              </div>
              <div class="user-info" v-show="!isCollapse">
                <div class="user-name">{{ currentUser.nickname || currentUser.username }}</div>
                <div class="user-status">在线</div>
              </div>
              <ArrowDown class="dropdown-arrow" />
            </div>
            <template #dropdown>
              <el-dropdown-menu class="apple-dropdown">
                <el-dropdown-item command="profile">
                  <User />
                  <span>个人中心</span>
                </el-dropdown-item>
                <el-dropdown-item divided command="logout">
                  <SwitchButton />
                  <span>退出登录</span>
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </header>

      <!-- 页面内容 -->
      <main class="apple-content">
        <router-view v-slot="{ Component, route }">
          <keep-alive :include="cachedComponents.value">
            <component :is="Component" :key="route.name" />
          </keep-alive>
        </router-view>
      </main>
    </div>

    <!-- API配置对话框 -->
    <el-dialog
      v-model="showApiConfig"
      title="API配置"
      width="1000px"
      class="apple-dialog"
    >
      <ApiConfig @close="showApiConfig = false" />
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, watch, onMounted, markRaw } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useNovelStore } from '@/stores/novel'
import { useAuthStore } from '@/stores/authStore'
import {
  House, Document, ChatLineSquare, Collection, Notebook, Aim,
  CreditCard, Setting, Key, Tools, EditPen, DataAnalysis,
  Expand, Fold, User, SwitchButton, ArrowDown, UserFilled, Moon, Sunny,
  Picture, VideoCamera, Microphone
} from '@element-plus/icons-vue'
import ApiConfig from '@/components/ApiConfig.vue'
import { useAuth } from '@/composables/useAuth'
import { ElMessage, ElMessageBox } from 'element-plus'
import { cachedComponents, debugCache } from '@/utils/cacheManager'

const router = useRouter()
const route = useRoute()
const novelStore = useNovelStore()
const authStore = useAuthStore()
const { user, isAdmin, logout } = useAuth()

// 响应式数据
const isCollapse = ref(false)
const showApiConfig = ref(false)
const activeMenu = ref('/')
const currentModel = ref('')
// 本地缓存键名
const LAST_MODEL_KEY = 'dashboard:lastModel'

// 使用缓存管理工具中的缓存组件列表

// 使用认证store中的用户信息
const currentUser = computed(() => user.value)

// 菜单项数据
const mainMenuItems = ref([
  { index: '/', title: '首页', icon: markRaw(House) },
  { index: '/novels', title: '小说列表', icon: markRaw(Document) },
  { index: '/prompts', title: '提示词库', icon: markRaw(ChatLineSquare) },
  { index: '/genres', title: '小说类型管理', icon: markRaw(Collection) },
  { index: '/chapters', title: '章节管理', icon: markRaw(Notebook) },
  { index: '/goals', title: '写作目标', icon: markRaw(Aim) },
  { index: '/billing', title: 'Token计费', icon: markRaw(CreditCard) }
])

const toolMenuItems = ref([
  { index: '/tools', title: '工具库', icon: markRaw(Tools) },
  { index: '/short-story', title: '短文写作', icon: markRaw(EditPen) },
  { index: '/book-analysis', title: '拆书工具', icon: markRaw(DataAnalysis) },
  { index: '/image-generation', title: 'AI绘图', icon: markRaw(Picture) },
  { index: '/video-generation', title: 'AI视频生成', icon: markRaw(VideoCamera) },
  { index: '/voice-generation', title: 'AI配音', icon: markRaw(Microphone) }
])

// 管理员菜单项
const adminMenuItems = ref([
  { index: '/users', title: '用户管理', icon: markRaw(UserFilled) },
  { index: '/settings', title: '系统设置', icon: markRaw(Setting) }
])

// 计算属性
const isApiConfigured = computed(() => novelStore.isApiConfigured)
const isDarkMode = computed(() => authStore.isDarkMode)

// 获取当前API配置
const currentApiConfig = computed(() => {
  return novelStore.getCurrentApiConfig()
})



// 可用模型列表（从后端API配置中获取）
const availableModels = ref([])

// 加载可用模型列表
const loadAvailableModels = async () => {
  try {
    // 检查用户是否已登录
    const token = localStorage.getItem('token')
    if (!token) {
      console.log('用户未登录，无法加载后端模型配置')
      availableModels.value = []
      return
    }

    // 从后端获取所有启用的公共API配置（全局共享）
    const { apiConfigApi } = await import('@/services/apiConfigApi.js')
    const configs = await apiConfigApi.getPublicApiConfigs()

    if (!configs || configs.length === 0) {
      console.log('暂无API配置')
      availableModels.value = []
      return
    }

    const enabledConfigs = configs.filter(config => config.enabled && config.selectedModel)

    // 提取所有可用的模型
    const modelSet = new Set()
    const modelDetails = new Map()

    // 只添加配置中的模型
    enabledConfigs.forEach(config => {
      if (config.selectedModel) {
        modelSet.add(config.selectedModel)
        modelDetails.set(config.selectedModel, {
          id: config.selectedModel,
          name: config.selectedModel,
          description: `来自配置: ${config.name}`
        })
      }
    })

    availableModels.value = Array.from(modelSet).map(id => modelDetails.get(id))
    console.log('加载的可用模型:', availableModels.value)
  } catch (error) {
    console.error('加载可用模型失败:', error)
    // 如果加载失败，设置为空数组
    availableModels.value = []
  }
}



const pageTitle = computed(() => {
  const titleMap = {
    '/': '首页',
    '/novels': '小说列表',
    '/prompts': '提示词库',
    '/genres': '小说类型管理',
    '/chapters': '章节管理',
    '/goals': '写作目标',
    '/billing': 'Token计费',
    '/tools': '工具库',
    '/short-story': '短文写作',
    '/book-analysis': '拆书工具',
    '/image-generation': 'AI绘图',
    '/video-generation': 'AI视频生成',
    '/voice-generation': 'AI配音',
    '/settings': '系统设置'
  }
  return titleMap[route.path] || '首页'
})



// 方法
const toggleSidebar = () => {
  isCollapse.value = !isCollapse.value
}

const handleMenuSelect = (index) => {
  router.push(index)
}

// 用户相关功能已通过useAuth组合式函数处理
// currentUser现在是computed属性，自动从认证store获取





// 处理下拉菜单命令
const handleCommand = (command) => {
  switch (command) {
    case 'profile':
      handleProfile()
      break
    case 'settings':
      handleSettings()
      break
    case 'userManagement':
      router.push('/users')
      break
    case 'logout':
      handleLogout()
      break
  }
}

const handleProfile = () => {
  // 跳转到个人中心页面
  router.push('/profile')
}

const handleSettings = () => {
  // 跳转到个人设置页面
  router.push('/settings')
}

const handleLogout = async () => {
  // 使用新的认证系统退出登录
  await logout(true) // true表示显示确认对话框
}

// 模型相关功能
const handleModelChange = async (modelId) => {
  try {
    console.log('切换模型:', modelId)

    // 从公共配置中查找包含此模型的API配置
    const { apiConfigApi } = await import('@/services/apiConfigApi.js')
    const configs = await apiConfigApi.getPublicApiConfigs()
    const configWithModel = configs.find(config =>
      config.selectedModel === modelId && config.enabled === 1
    )

    if (configWithModel) {
      // 切换到此配置
      const success = await novelStore.switchToApiConfig(configWithModel.id)

      if (success) {
        currentModel.value = modelId
        // 写入本地缓存
        try { localStorage.setItem(LAST_MODEL_KEY, modelId) } catch (e) { /* 忽略本地存储异常 */ }
        const modelName = getModelDisplayName(modelId)
        ElMessage.success(`已切换到模型: ${modelName}`)
      } else {
        ElMessage.error('切换模型失败')
      }
    } else {
      // 如果没有找到对应的配置
      const modelName = getModelDisplayName(modelId)
      ElMessage.warning(`模型 ${modelName} 当前不可用，请联系管理员`)
    }

  } catch (error) {
    console.error('切换模型失败:', error)
    ElMessage.error('切换模型失败: ' + error.message)
  }
}

const getModelDisplayName = (modelId) => {
  // 在可用模型中查找
  const model = availableModels.value.find(m => m.id === modelId)
  if (model) return model.name

  // 找不到就返回原ID
  return modelId
}

// 初始化模型选择器
const initializeModelSelector = async () => {
  try {
    // 加载可用模型列表
    await loadAvailableModels()

    // 获取当前选中的模型
    try {
      // 优先恢复上次使用的模型
      let restored = false
      try {
        const saved = localStorage.getItem(LAST_MODEL_KEY)
        if (saved && availableModels.value.find(m => m.id === saved)) {
          restored = true
          currentModel.value = saved
          // 自动应用已保存的模型对应的配置，避免每次手动切换
          await handleModelChange(saved)
          console.log('恢复上次使用的模型:', saved)
        }
      } catch (e) { /* 忽略本地存储异常 */ }

      if (!restored) {
        // 如果已经有选中的模型且仍在可用列表中，保持不变
        if (currentModel.value && availableModels.value.find(m => m.id === currentModel.value)) {
          console.log('保持当前选中模型:', currentModel.value)
        } else if (availableModels.value.length > 0) {
          // 使用第一个可用模型
          currentModel.value = availableModels.value[0].id
          console.log('使用第一个可用模型:', currentModel.value)
        } else {
          console.log('未找到可用模型')
        }
      }
    } catch (error) {
      console.error('获取模型失败:', error)
    }

    console.log('模型选择器初始化完成, 当前模型:', currentModel.value)
  } catch (error) {
    console.error('初始化模型选择器失败:', error)
  }
}

// 监听路由变化
watch(() => route.path, (newPath) => {
  activeMenu.value = newPath

  // 调试：打印当前路由和缓存状态
  if (process.env.NODE_ENV === 'development') {
    console.log('🔄 路由切换到:', newPath)
    console.log('📦 当前缓存组件:', cachedComponents.value)
    console.log('🎯 当前路由组件名:', route.name)
  }
}, { immediate: true })

// 监听API配置变化，更新模型选择器
watch(() => [isApiConfigured.value, currentApiConfig.value], async () => {
  // 延迟一下，确保配置已经加载完成
  setTimeout(async () => {
    // 只加载模型列表，不自动选择（保持用户的当前选择）
    await loadAvailableModels()
    
    // 如果当前选中的模型不在可用列表中，才需要切换
    if (currentModel.value && !availableModels.value.find(m => m.id === currentModel.value)) {
      if (availableModels.value.length > 0) {
        currentModel.value = availableModels.value[0].id
        console.log('当前模型不可用，切换到:', currentModel.value)
      }
    }
  }, 100)
})

// 组件挂载时初始化
onMounted(async () => {
  // 确保store已经初始化完成
  await novelStore.initializeApiConfig()

  // 延迟一下再初始化模型选择器
  setTimeout(async () => {
    await initializeModelSelector()
  }, 200)

  // 用户信息现在通过认证store自动管理，无需手动加载

  // 开发环境下打印缓存调试信息
  if (process.env.NODE_ENV === 'development') {
    debugCache()
  }
})

// 切换主题
const toggleTheme = () => {
  authStore.toggleTheme()
}

</script>

<style scoped>
/* 苹果风格全局样式 */
.apple-dashboard {
  display: flex;
  height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  overflow: hidden;
}

/* 苹果风格侧边栏 */
.apple-sidebar {
  width: 280px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  flex-direction: column;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 100;
}

.apple-sidebar.collapsed {
  width: 80px;
}

.apple-sidebar.collapsed .nav-item {
  justify-content: center;
  padding: 12px;
}

.apple-sidebar.collapsed .nav-item-icon {
  margin-right: 0;
}

.apple-sidebar.collapsed .nav-item {
  justify-content: center;
  padding: 12px;
}

.apple-sidebar.collapsed .nav-item-icon {
  margin-right: 0;
}

/* Logo区域 */
.apple-logo {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  background: rgba(255, 255, 255, 0.8);
}

.logo-icon {
  font-size: 28px;
  margin-right: 12px;
  transition: all 0.3s ease;
}

.logo-text {
  font-size: 20px;
  font-weight: 600;
  color: #1d1d1f;
  letter-spacing: -0.5px;
  transition: all 0.3s ease;
}

.apple-sidebar.collapsed .logo-text {
  opacity: 0;
  transform: translateX(-20px);
}

/* 导航区域 */
.apple-nav {
  flex: 1;
  padding: 24px 16px;
  overflow-y: auto;
}

.nav-section {
  margin-bottom: 32px;
}

.nav-section-title {
  font-size: 13px;
  font-weight: 600;
  color: #86868b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
  padding: 0 12px;
  transition: all 0.3s ease;
}

.nav-items {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nav-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;
  overflow: hidden;
}

.nav-item:hover {
  background: rgba(0, 122, 255, 0.1);
  transform: translateX(4px);
}

.nav-item.active {
  background: linear-gradient(135deg, #007aff 0%, #5856d6 100%);
  color: white;
  box-shadow: 0 4px 16px rgba(0, 122, 255, 0.3);
}

.nav-item-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  font-size: 18px;
  transition: all 0.3s ease;
}

.nav-item-text {
  font-size: 15px;
  font-weight: 500;
  color: #1d1d1f;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.nav-item.active .nav-item-text {
  color: white;
}

.apple-sidebar.collapsed .nav-item-text {
  opacity: 0;
  transform: translateX(-20px);
}

.apple-sidebar.collapsed .nav-section-title {
  opacity: 0;
}

/* 主要内容区域 */
.apple-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 20px 0 0 0;
  margin-left: -20px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* 苹果风格顶部栏 */
.apple-header {
  height: 80px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  position: relative;
  z-index: 50;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 20px;
}

.sidebar-toggle {
  width: 36px;
  height: 36px;
  border: none;
  background: rgba(0, 122, 255, 0.1);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #007aff;
  font-size: 16px;
}

.sidebar-toggle:hover {
  background: rgba(0, 122, 255, 0.2);
  transform: scale(1.05);
}

.page-title {
  font-size: 24px;
  font-weight: 700;
  color: #1d1d1f;
  margin: 0;
  letter-spacing: -0.5px;
}

.header-center {
  flex: 1;
  display: flex;
  justify-content: center;
  max-width: 400px;
}

.model-selector-wrapper {
  width: 100%;
}

.model-selector {
  width: 100%;
}

.apple-select {
  width: 100%;
}

.apple-select :deep(.el-input__wrapper) {
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.apple-select :deep(.el-input__wrapper:hover) {
  border-color: #007aff;
  box-shadow: 0 4px 16px rgba(0, 122, 255, 0.2);
}

.model-description {
  float: right;
  color: #86868b;
  font-size: 12px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* API配置按钮 */
.api-config-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: none;
  border-radius: 8px;
  background: rgba(255, 149, 0, 0.1);
  color: #ff9500;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.api-config-btn.configured {
  background: rgba(52, 199, 89, 0.1);
  color: #34c759;
}

.api-config-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 黑暗模式切换按钮 */
.theme-toggle-btn {
  width: 36px;
  height: 36px;
  border: none;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #1d1d1f;
  font-size: 16px;
}

.theme-toggle-btn:hover {
  background: rgba(0, 0, 0, 0.1);
  transform: scale(1.05);
}

/* 用户信息 */
.user-dropdown-wrapper {
  position: relative;
}

.user-profile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.user-profile:hover {
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.user-avatar {
  position: relative;
}

.user-avatar::after {
  content: '';
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 10px;
  height: 10px;
  background: #34c759;
  border: 2px solid white;
  border-radius: 50%;
}

.user-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.user-name {
  font-size: 14px;
  font-weight: 600;
  color: #1d1d1f;
  line-height: 1.2;
}

.user-status {
  font-size: 12px;
  color: #34c759;
  line-height: 1.2;
}

.dropdown-arrow {
  font-size: 12px;
  color: #86868b;
  transition: transform 0.3s ease;
}

.user-profile:hover .dropdown-arrow {
  transform: rotate(180deg);
}

/* 下拉菜单样式 */
.apple-dropdown {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  padding: 8px;
}

.apple-dropdown :deep(.el-dropdown-menu__item) {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #1d1d1f;
  transition: all 0.3s ease;
}

.apple-dropdown :deep(.el-dropdown-menu__item:hover) {
  background: rgba(0, 122, 255, 0.1);
  color: #007aff;
}

/* 主内容区域 */
.apple-content {
  flex: 1;
  padding: 32px;
  overflow-y: auto;
  background: rgba(248, 249, 250, 0.8);
  border-radius: 20px 20px 0 0;
  margin-top: -20px;
  padding-top: 52px;
}

/* 对话框样式 */
.apple-dialog :deep(.el-dialog) {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 16px 64px rgba(0, 0, 0, 0.2);
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .apple-sidebar {
    width: 240px;
  }

  .apple-sidebar.collapsed {
    width: 70px;
  }

  .apple-header {
    padding: 0 24px;
  }

  .apple-content {
    padding: 24px;
  }
}

@media (max-width: 768px) {
  .apple-sidebar {
    position: fixed;
    z-index: 1000;
    height: 100vh;
    width: 280px;
    transform: translateX(-100%);
  }

  .apple-sidebar:not(.collapsed) {
    transform: translateX(0);
  }

  .apple-main {
    margin-left: 0;
    border-radius: 0;
  }

  .header-center {
    display: none;
  }

  .apple-content {
    padding: 20px;
    margin-top: 0;
    border-radius: 0;
  }
}

/* 滚动条样式 */
.apple-nav::-webkit-scrollbar,
.apple-content::-webkit-scrollbar {
  width: 6px;
}

.apple-nav::-webkit-scrollbar-track,
.apple-content::-webkit-scrollbar-track {
  background: transparent;
}

.apple-nav::-webkit-scrollbar-thumb,
.apple-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

.apple-nav::-webkit-scrollbar-thumb:hover,
.apple-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

/* ============ 黑暗模式样式 ============ */
html.dark .apple-dashboard {
  background: linear-gradient(135deg, #0f172a 0%, #1a2838 100%);
}

html.dark .apple-sidebar {
  background: rgba(20, 30, 50, 0.95);
  border-right-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

html.dark .apple-logo {
  border-bottom-color: rgba(255, 255, 255, 0.1);
  background: rgba(20, 30, 50, 0.8);
}

html.dark .logo-text {
  color: #e4e7ed;
}

html.dark .nav-section-title {
  color: #8a8f99;
}

html.dark .nav-item {
  color: #e4e7ed;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

html.dark .nav-item:hover {
  background: rgba(0, 122, 255, 0.2);
}

html.dark .nav-item.active {
  background: linear-gradient(135deg, #007aff 0%, #5856d6 100%);
  color: white;
  box-shadow: 0 4px 16px rgba(0, 122, 255, 0.3);
}

html.dark .nav-item-text {
  color: #e4e7ed;
}

html.dark .apple-main {
  background: rgba(20, 30, 50, 0.8);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

html.dark .apple-header {
  background: rgba(20, 30, 50, 0.95);
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

html.dark .page-title {
  color: #e4e7ed;
}

html.dark .sidebar-toggle {
  background: rgba(0, 122, 255, 0.15);
  color: #409eff;
}

html.dark .sidebar-toggle:hover {
  background: rgba(0, 122, 255, 0.25);
}

html.dark .apple-select :deep(.el-input__wrapper) {
  background: rgba(30, 40, 60, 0.9);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  color: #e4e7ed;
}

html.dark .apple-select :deep(.el-input__wrapper:hover) {
  border-color: #409eff;
  box-shadow: 0 4px 16px rgba(0, 122, 255, 0.2);
}

html.dark .api-config-btn {
  background: rgba(255, 149, 0, 0.15);
  color: #f5a623;
}

html.dark .theme-toggle-btn {
  background: rgba(255, 255, 255, 0.05);
  color: #e4e7ed;
}

html.dark .theme-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

html.dark .user-profile {
  background: rgba(30, 40, 60, 0.9);
  border-color: rgba(255, 255, 255, 0.1);
  color: #e4e7ed;
}

html.dark .user-profile:hover {
  background: rgba(40, 50, 70, 0.95);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

html.dark .user-name {
  color: #e4e7ed;
}

html.dark .dropdown-arrow {
  color: #8a8f99;
}

html.dark .apple-dropdown {
  background: rgba(20, 30, 50, 0.95);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

html.dark .apple-dropdown :deep(.el-dropdown-menu__item) {
  color: #e4e7ed;
}

html.dark .apple-dropdown :deep(.el-dropdown-menu__item:hover) {
  background: rgba(0, 122, 255, 0.15);
  color: #409eff;
}

html.dark .apple-content {
  background: rgba(15, 23, 42, 0.9);
}

html.dark .apple-dialog :deep(.el-dialog) {
  background: rgba(20, 30, 50, 0.95);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 16px 64px rgba(0, 0, 0, 0.4);
}
</style>